<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>

  <body>
    <!-- 
    v-model:
      概念：是一个指令，用于做表单元素的数据双向绑定，它是一个语法糖

      一般展开形式：

          v-model="msg"
          =>
          v-bind:value="msg"
          v-on:input="msg = $event.target.value"

      细节点：

          1. 文本输入的元素，text、password、textarea
              v-model="msg"
              =>
              v-bind:value="msg"
              v-on:input="msg = $event.target.value"

          2. type="checkbox"    type="radio"
              v-model="msg"
              =>
              v-bind:checked="msg"
              v-on:change="msg = $event.target.checked"

          3. select
              v-model="msg"
              =>
              v-bind:value="msg"
              v-on:change="msg = $event.target.value"

   -->
    <div id="app">
      <input v-model.number.trim="age" />

      <hr />

      <p>Message is: {{ message }}</p>
      <input v-model.lazy="message" placeholder="edit me" />

      <input type="checkbox" id="checkbox" v-model="checked" />
      <label for="checkbox">{{ checked }}</label>

      <hr />
      <div>Checked names: {{ checkedNames }}</div>

      <input type="checkbox" id="jack" value="Jack" v-model="checkedNames" />
      <label for="jack">Jack</label>

      <input type="checkbox" id="john" value="John" v-model="checkedNames" />
      <label for="john">John</label>

      <input type="checkbox" id="mike" value="Mike" v-model="checkedNames" />
      <label for="mike">Mike</label>

      <hr />
      <div>Selected: {{ selected }}</div>

      <select v-model="selected">
        <option disabled value="">Please select one</option>
        <option value="001">上海</option>
        <option value="002">北京</option>
        <option value="003">深圳</option>
      </select>
    </div>

    <script type="module">
      import { createApp } from "./lib/vue3.esm.browser.js";

      createApp({
        data() {
          return {
            age: 10,
            message: "我的天",
            checked: true,
            checkedNames: [],
            selected: 'A'
          };
        },
      }).mount("#app");
    </script>
  </body>
</html>
